<template>
	<div class="m-player">
		<!-- 公告播放器        -->
		<ul id="con1" ref="con1" :class="{anim:animate==true}">
			<li v-for='item in noticeDatas'>
				<a href="#" @click="showNoticeInfo(item.id)">{{item.title}}</a>
			</li>
		</ul>
	</div>
</template>

<script>
	import { subjectList } from '/api/index.js'
	export default {
		name: "notice-player",
		data() {
			return {
				animate: false,
				noticeDatas: []
			}
		},
		created() {

		},
		methods: {
			scroll() {
				this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
				setTimeout(() => { //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
					this.noticeDatas.push(this.noticeDatas[0]); // 将数组的第一个元素添加到数组的
					this.noticeDatas.shift(); //删除数组的第一个元素
					this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
				}, 500)
			},
			showNoticeInfo(id) {
				var paramObj = {
					id:id
				}
				this.$router.push({
					name: 'noticeTransfer',
					params: {
						paramObj: paramObj
					}
				})
			}
		},
		mounted() {
			//获取公告展示数据
			subjectList({
				pageNum: 1,
				pageSize: 20
			}).then(res => {
				if(res.success === false) {
					this.error = true
					return;
				}
				let _data = res.data;
				this.noticeDatas = _data; //公告数据大于七条就轮播展示
				if(_data.length > 7) {
					setInterval(this.scroll, 3000);
				}
			}).catch((e) => {
				console.log(e)
			});
		}
	}
</script>

<style scoped>
	.m-player {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	.anim {
		transition: all 0.5s;
		margin-top: -30px;
	}
	
	#con1 li {
		list-style: none;
		line-height: 30px;
		height: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 10px;
	}
	
	#con1 li:hover {
		cursor: pointer;
	}
	
	#con1 a {
		color: #7B7B7B;
		text-decoration: none;
	}
	
	#con1 a:hover {
		color: #000000;
	}
</style>